<template>
    <van-tabbar v-model="active" @change="onChange" v-if="showFooter">
        <template v-for="(item, index) in tabbarList">
            <van-tabbar-item :icon="item.icon" v-if="!item.slotIcon" :key="index">{{ item.name }}</van-tabbar-item>
            <van-tabbar-item v-else :key="index">
                <span>{{ item.name }}</span>
                <template #icon="props">
                    <i class="icon iconfont" :class="[props.active ? item.activeIcon : item.inactiveIcon]"></i>
                    <!-- <img :src="props.active ? item.activeIcon : item.inactiveIcon" /> -->
                </template>
            </van-tabbar-item>
        </template>
    </van-tabbar>
    <div v-else></div>
</template>

<script>
import { mapGetters } from 'vuex'
import homeIcon from '@/static/image/tab_navi_home.png'
import homeIconActive from '@/static/image/tab_navi_home_active.png'
import courseIcon from '@/static/image/tab_navi_course.png'
import courseIconActive from '@/static/image/tab_navi_course_active.png'
import learnIcon from '@/static/image/tab_navi_learn.png'
import learnIconActive from '@/static/image/tab_navi_learn_active.png'
import userIcon from '@/static/image/tab_navi_user.png'
import userIconActive from '@/static/image/tab_navi_user_active.png'
import {delQuery, parseQuery} from "@/assets/js/util";
export default {
    data() {
        return {
            showFooter: false,
            active: 0,
            tabbarList: [
                {
                    name: '首页',
                    router: 'index',
                    slotIcon: true,
                    activeIcon: homeIconActive,
                    inactiveIcon: homeIcon
                },
                {
                    name: '选课中心',
                    router: 'course-list-center',
                    slotIcon: true,
                    activeIcon: courseIconActive,
                    inactiveIcon: courseIcon
                },
                {
                    name: '任务',
                    router: 'learn',
                    slotIcon: true,
                    activeIcon: learnIconActive,
                    inactiveIcon: learnIcon
                },
                {
                    name: '我的',
                    router: 'user',
                    slotIcon: true,
                    activeIcon: userIconActive,
                    inactiveIcon: userIcon
                },
            ],
        }
    },
    computed: {
        ...mapGetters({
          siteId: 'siteInfo/siteId'
        })
    },
    mounted() {
        this.getMenu()
    },
    methods: {
        getMenu() {
            if (this.siteId) {
                  console.log("=>(Footer.vue:78) this.siteId", this.siteId);
                this.$api.site.siteWAPMenuValid({
                    siteId: this.siteId
                }).then(res => {
                    this.tabbarList = res.map(e => {
                        e.name = e.menuName
                        e.router = e.goTarget
                        e.slotIcon = true
                        e.activeIcon = e.menuIcon
                        e.inactiveIcon = e.menuIcon
                        return e
                    })
                    this.setActiveBar(this.$route)
                  // 如果含有本页面的路由，就设置sessionStorage
                  let indexHaveForum = this.tabbarList.findIndex(item=>item.router.indexOf('/home/forum')>-1),
                  indexHaveDoc = this.tabbarList.findIndex(item=>item.router.indexOf('/doc/list/center')>-1)
                  if (indexHaveForum > -1 ) sessionStorage.setItem('haveForum', '1')
                  if (indexHaveDoc > -1) sessionStorage.setItem('haveDoc', '1')
                })
            }
        },
        onChange(index) {
            this.$uniPush(this.tabbarList[index].router)
        },

        setActiveBar(val) {
            let current = val.path
            if (current && current.length > 1) {
              current = current[current.length-1] === '/' ? current.slice(0, current.length-1) : current
            }
            let index = this.tabbarList.findIndex(item => delQuery(item.router) === current)
            this.showFooter = !!this.tabbarList.find(item => delQuery(item.goTarget || '') === current)
            index > -1 && (this.active = index)
        }
    },
    watch: {
        '$route' (val) {
            this.setActiveBar(val)
        },
        siteId (n) {
            if (n) {
                this.getMenu()
            }
        }
    }

}
</script>

<style lang="scss" scoped>
.van-tabbar{
    border-top: 1px solid #DDDDDD;
    z-index: 1000;
    :deep(.van-tabbar-item__icon){
        .iconfont{
            font-size: 22px;
            font-weight: normal;
        }
    }
}
</style>
